<template>
  <div class="aside">
    <el-menu
      :default-active="currentRoute"
      class="el-menu-vertical-demo"
      active-text-color="#ffd04b"
      background-color="#545c64"
      text-color="#fff"
      :collapse="isCollapse"
      :unique-opened="true"
      @open="handleOpen"
      @close="handleClose"
      router
    >
      <el-sub-menu
        style="align-items: left"
        v-for="(item, index) in menus"
        :key="index"
        :index="index.toString()"
      >
        <template #title>
          <i :class="item.icon"></i>
          <span>{{ item.name }}</span>
        </template>

        <el-menu-item-group>
          <el-menu-item
            v-for="(_item, _index) in item.data"
            :key="_index"
            :index="_item.url"
            :route="'/main/' + _item.url"
            @click="jump"
          >
            {{ _item.url }}
            <i :class="_item.icon"></i>
            <span>{{ _item.menuName }}</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script lang="ts" setup>
import { computed } from "vue"
import { IKey } from "@/store/user/types"

import { useStore, newUseStore } from "@/store"
import { useRoute } from "vue-router"

// const store = useStore()
const store = newUseStore()
const router = useRoute()
const isCollapse = computed(() => store.state.isCollapse)
// console.log(1111, store.lsActions.acGetFriendLists);

// const isCollapse = computed(() => store.lsMutatisons);
const handleOpen = (key: any, keyPath: any) => {
  console.log(key, keyPath)
}
const handleClose = (key: any, keyPath: any) => {
  console.log(key, keyPath)
}

const menus: IKey[] = store.state.moduleUser.userInfo.menus
const jump = () => {
  console.log("jump")
}

const currentRoute = router.name
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 95vh;
  height: auto;
}

.el-menu-vertical-demo {
  /* width: 200px; */
  min-height: 100%;
}

.el-sub-menu__title {
  text-align: left;
}

.aside {
  height: 100%;
  background: red;
}
</style>
